{% extends 'cm/base.html' %}
{% load static %}
{% block content %}
    <div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Dashboard</a>
        </li>
        <li class="breadcrumb-item active">Tables</li>
      </ol>
      <!-- Example DataTables Card-->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-table"></i> Data Table Example</div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>团队编号</th>
                  <th>团队名称</th>
                  <th>团队属性</th>
                  <th>编辑</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>团队编号</th>
                  <th>团队名称</th>
                  <th>团队属性</th>
                  <th>编辑</th>
                </tr>
              </tfoot>
              <tbody>
                {% for team in team_list %}
                <tr>
                  <td>{{ team.team_number}}</td>
                  <td>{{ team.team_name}}</td>
                  <td>{{ team.get_team_type_display}}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% comment %}1 - This js which allows to submit forms through ajax and must be loaded in the page{% endcomment %}
{% block extra_js%}
    <script src="http://malsup.github.com/jquery.form.js"></script>
{% endblock %}

{% comment %}2 - The button which shows the modal, notice the href attribute{% endcomment %}
<p>Click <a data-toggle="modal" data-target="#modal" href="{% url 'cm:news-create' %}">here</a> to show the modal</p>

{% comment %}3 - The modal container{% endcomment %}
<div class="modal fade" id="modal"></div>

{% comment %}4 - This js code will load the response from the href url of the showing button inside the modal{% endcomment %}
<script>
$('#modal').on('show.bs.modal', function (event) {
    var modal = $(this)
    $.ajax({
        url: "{% url 'cm:news-create' %}",
        context: document.body
    }).done(function(response) {
        modal.html(response);
    });
})
</script>
        <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
      </div>
    </div>
    <!-- /.container-fluid-->
{% endblock %}
